<template>
<div>
	<div>
		<van-nav-bar
		  title="标题"
		  left-text="返回"
		  left-arrow
		  @click-left="onClickLeft"
		/>
	</div>	
	<div>
		<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
		  <van-swipe-item>1</van-swipe-item>
		  <van-swipe-item>2</van-swipe-item>		  
		</van-swipe>
	</div>
	<!-- 优惠券单元格 -->
	<van-coupon-cell
	  :coupons="coupons"
	  :chosen-coupon="chosenCoupon"
	  @click="showList = true"
	/>
	<!-- 优惠券列表 -->
	<van-popup
	  v-model:show="showList"
	  round
	  position="bottom"
	  style="height: 90%; padding-top: 4px;"
	>
	  <van-coupon-list
	    :coupons="coupons"
	    :chosen-coupon="chosenCoupon"
	    :disabled-coupons="disabledCoupons"
	    @change="onChange"
	    @exchange="onExchange"
	  />
	</van-popup>
	<div>
		{{aa}}
	</div>
	<div>
		<van-action-bar>
		  <van-action-bar-icon icon="chat-o" text="客服" dot />
		  <van-action-bar-icon icon="cart-o" text="购物车" badge="5" />
		  <van-action-bar-icon icon="shop-o" text="店铺" badge="12" />
		  <van-action-bar-button type="warning" text="加入购物车" />
		  <van-action-bar-button type="danger" text="立即购买" />
		</van-action-bar>
	</div>
	
</div>
</template>
<script>
	import { ref } from 'vue';
import { Toast } from 'vant';
export default {
  setup() {  const coupon = {
    available: 1,
    condition: '无使用门槛\n最多优惠12元',
    reason: '',
    value: 150,
    name: '优惠券名称',
    startAt: 1489104000,
    endAt: 1514592000,
    valueDesc: '1.5',
    unitDesc: '元',
  };
  
  const coupons = ref([coupon]);
  const showList = ref(false);
  const chosenCoupon = ref(-1);
  
  const onChange = (index) => {
    showList.value = false;
    chosenCoupon.value = index;
  };
  const onExchange = (code) => {
    coupons.value.push(coupon);
  };
	   const onClickIcon = () => Toast('点击图标');
	      const onClickButton = () => Toast('点击按钮');
    const onClickLeft = () => history.back();
    return {
		
      onClickLeft,
	   onClickIcon,
      onClickButton,
	  coupons,
	  showList,
	  onChange,
	  onExchange,
	  chosenCoupon,
	  disabledCoupons: [coupon],
	    goods: [],
	        good: [],
	        show: false,
	        cart: []
    };

  
  },
  data () {
	  return{
		  aa:"这是一个很牛逼的东西"
	  }
  },
  methods:{
	  spxq(id){
	  			 this.axios.get("goods/selectone?gid="+id).then((res) => {
	  				 
	  			 			 if(res.data.code==200){
	  			 				 // this.$router.push("/znsb");
	  							 this.$router.push({
	  								 path:"/goodsdetail",
	  								 query:{
	  									 id:id
	  								 }
	  							 })
	  							 this.$store.commit("znsb",res.data.data);
	  							 
	  			 			 }else{
	  			 				this.$toast({
	  			 				  message: "亲，网络异常",
	  			 				  
	  							}) 
	  						 }
	  		  }
	  		  
	  )}
	  	
  }
};




</script>

<style >
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 50px;
    line-height: 200px;
    text-align: center;
    background-color: #39a9ed;
  }
</style>
